<template>
    <canvas ref="myCanvas" :width="width" :height="height">
        Your browser does not support the HTML5 canvas tag.
    </canvas>
  <!--    <a-button @click="test">1</a-button>-->
</template>

<script>
export default {
    name: "hexagonFeature",
    props: {
        width: {
            type: String,
            required: true,
            default: "400"
        },
        height: {
            type: String,
            required: true,
            default: "400"
        },
        scoreArray: {
            type: Array,
            required: true,
            // default: [100, 70, 50, 50, 50, 30]
            // }
        },
        isFeatureHasScore:{
            type: Boolean,
            required: true,
        },
    },
    data() {
        return {
            //画布对象
            c: null,
            //画布上下文,用来绘制背景图形
            ctx: null,

            //圆心坐标和半径
            //背景及同心圆相关参数
            arcXPoint: this.width / 2,  // 设置圆心X点为画布边长的一半
            arcYPoint: this.height / 2,  // 设置圆心Y点为画布边长的一半
            arcR: this.width / 2 - 10, // 设置圆的半径
            //正六边形的边长
            sideLength: this.arcR,//六边形边长（与最大同心圆半径同长，你们可以自己算下）
            //x,y偏移量
            offsetX: (Math.sqrt(3) * this.sideLength) / 2,//x坐标的偏移量 cos 30° * 边长 / 2,
            offsetY: this.sideLength / 2,//x坐标的偏移量 sin 30° * 边长
            offsetSmallX: (Math.sqrt(3) * (this.sideLength - this.small)) / 2,
            offsetSmallY: (this.sideLength - this.small) / 2,
            //小六边形与大六边形边长差
            small: 30,
            //各个特征的得分

            // 定义一个名为scoreArray的数组，包含了一组分数数据
            // 数组的长度为6，每个元素代表一个特征的得分,HPS、ZJ、GH、FMW、CK、CX


            //计算分数以及每次更新的x坐标长度
            maxIndex: 0,
            minIndex: 0,
            drawScoreFrames: 24,
            drawCount: 0,
            //交叉线参数
            startX: this.arcXPoint,
            startY: this.arcYPoint,
            //定义六边形的6个点，点位置如下图所示
            pointArray: [
                {"id": 1, "x": this.startX, "y": this.startY - this.arcR},
                {"id": 2, "x": this.startX + this.offsetX, "y": this.startY - this.offsetY},
                {"id": 3, "x": this.startX + this.offsetX, "y": this.startY + this.offsetY},
                {"id": 4, "x": this.startX, "y": this.startY + this.arcR},
                {"id": 5, "x": this.startX - this.offsetX, "y": this.startY + this.offsetY},
                {"id": 6, "x": this.startX - this.offsetX, "y": this.startY - this.offsetY},
            ],
            //小六边形
            smallPointArray: [
                {"id": 1, "x": this.startX, "y": this.startY - this.arcR + this.small},
                {"id": 2, "x": this.startX + this.offsetSmallX, "y": this.startY - this.offsetSmallY},
                {"id": 3, "x": this.startX + this.offsetSmallX, "y": this.startY + this.offsetSmallY},
                {"id": 4, "x": this.startX, "y": this.startY + this.arcR - this.small},
                {"id": 5, "x": this.startX - this.offsetSmallX, "y": this.startY + this.offsetSmallY},
                {"id": 6, "x": this.startX - this.offsetSmallX, "y": this.startY - this.offsetSmallY},
            ],
            i: 1
        }
    },
    created() {

    },
    methods: {
        test() {
            this.i++
            console.log(this.i)
            this.updateDrawer()
        },
        /**
         * 绘制背景图形--绘制函数
         */
        drawBackground() {
            let c = this.c
            let ctx = this.ctx
            //清空画布
            // ctx.clearRect(0, 0, c.width, c.height);
            ctx.beginPath();
            //绘制交叉线条
            for (let i = 0; i < 3; i++) {
                let startPoint = this.pointArray[i];
                let endPoint = this.pointArray[i + 3];
                ctx.strokeStyle = "rgba(64,143,153,0.7)";
                ctx.moveTo(startPoint.x, startPoint.y);
                ctx.lineTo(endPoint.x, endPoint.y);
                ctx.lineWidth = 1;
                ctx.stroke();//填充路径颜色
            }
            ctx.closePath()
            // //绘制大六边形
            // let bigPointArray = this.pointArray
            // let radius = 5
            // ctx.beginPath();
            // ctx.moveTo(bigPointArray[0].x, bigPointArray[0].y);
            // for (let i = 1; i < 6; i++) {
            //     let endPoint = bigPointArray[i];
            //     ctx.lineTo(endPoint.x, endPoint.y);
            //     if (i === 5) {
            //         ctx.lineTo(bigPointArray[0].x, bigPointArray[0].y);
            //     }
            //     ctx.strokeStyle = "#0af3e8";
            //     ctx.lineWidth = 3;
            //     ctx.lineCap = "round";
            //     ctx.stroke();//填充路径颜色
            // }
            this.drawArc()
            //绘制小六边形
            let smallPointArray = this.smallPointArray
            ctx.beginPath();
            ctx.moveTo(smallPointArray[0].x, smallPointArray[0].y);
            for (let i = 1; i < 6; i++) {
                let endPoint = smallPointArray[i];
                ctx.lineTo(endPoint.x, endPoint.y);
                if (i === 5) {
                    ctx.lineTo(smallPointArray[0].x, smallPointArray[0].y);
                }
                ctx.strokeStyle = "rgba(64,143,153,0.7)";
                ctx.lineWidth = 1;
                ctx.lineCap = "round";
                ctx.stroke();//填充路径颜色
            }
            ctx.closePath()
        },
        /**
         * 动画绘制
         */
        updateDrawer() {
            this.c = this.$refs.myCanvas;
            this.ctx = this.c.getContext('2d');
            let c = this.c
            let ctx = this.ctx
            let scoreArray = this.scoreArray
            const centerX = c.width / 2; // 正六边形的中心 X 坐标
            const centerY = c.height / 2; // 正六边形的中心 Y 坐标
            let pi = Math.PI / 6
            //步长
            let step1 = scoreArray[0] / 60
            let step2 = scoreArray[1] / 60
            let step3 = scoreArray[2] / 60
            let step4 = scoreArray[3] / 60
            let step5 = scoreArray[4] / 60
            let step6 = scoreArray[5] / 60
            let i = this.i
            ctx.beginPath();
            //起点 琥珀色
            ctx.moveTo(centerX, centerY - i * step1)
            //第二个点 真菌
            ctx.lineTo(centerX + i * step2 * (Math.cos(pi)), centerY - i * step2 * (Math.sin(pi)))
            //第三个点 钙化
            ctx.lineTo(centerX + i * step3 * (Math.cos(pi)), centerY + i * step3 * (Math.sin(pi)))
            //第四个点 分泌物
            ctx.lineTo(centerX, centerY + i * step4)
            //第五个点 穿孔
            ctx.lineTo(centerX - i * step5 * (Math.cos(pi)), centerY + i * step5 * (Math.sin(pi)))
            //第六个点 出血
            ctx.lineTo(centerX - i * step6 * (Math.cos(pi)), centerY - i * step6 * (Math.sin(pi)))
            ctx.fillStyle = "rgba(145,109,61,0.5)";
            // ctx.fillStyle = 'rgb(255,0,0,0.5)';
            ctx.fill();
            ctx.closePath();
            ctx.strokeStyle = "#fffc09";
            ctx.lineWidth = 2;
            ctx.stroke();
            // }
        },
        /**
         * 初始化
         */
        init() {
            //获取画布对象
            this.c = this.$refs.myCanvas;
            this.ctx = this.c.getContext('2d');
            //圆心坐标和半径
            //背景及同心圆相关参数
            this.arcXPoint = this.width / 2  // 设置圆心X点为画布边长的一半
            this.arcYPoint = this.height / 2 // 设置圆心Y点为画布边长的一半
            this.arcR = this.width / 2 - 10 // 设置圆的半径
            //正六边形的边长
            this.sideLength = this.arcR//六边形边长（与最大同心圆半径同长，你们可以自己算下）
            //x,y偏移量
            this.offsetX = (Math.sqrt(3) * this.sideLength) / 2//x坐标的偏移量 cos 30° * 边长 / 2,
            this.offsetY = this.sideLength / 2//x坐标的偏移量 sin 30° * 边长
            //小六边形的x,y偏移量
            this.offsetSmallX = (Math.sqrt(3) * (this.sideLength - this.small)) / 2
            this.offsetSmallY = (this.sideLength - this.small) / 2
            //小六边形与大六边形边长差
            this.small = 30

            let x = this.arcXPoint
            let y = this.arcYPoint
            let r = this.arcR
            let offsetX = this.offsetX
            let offsetY = this.offsetY
            let offsetSmallX = this.offsetSmallX
            let offsetSmallY = this.offsetSmallY
            // 大六边形
            this.pointArray = [
                {"id": 1, "x": x, "y": y - r},
                {"id": 2, "x": x + offsetX, "y": y - offsetY},
                {"id": 3, "x": x + offsetX, "y": y + offsetY},
                {"id": 4, "x": x, "y": y + r},
                {"id": 5, "x": x - offsetX, "y": y + offsetY},
                {"id": 6, "x": x - offsetX, "y": y - offsetY},
            ];
            //小六边形
            this.smallPointArray = [
                {"id": 1, "x": x, "y": y - r + this.small},
                {"id": 2, "x": x + offsetSmallX, "y": y - offsetSmallY},
                {"id": 3, "x": x + offsetSmallX, "y": y + offsetSmallY},
                {"id": 4, "x": x, "y": y + r - this.small},
                {"id": 5, "x": x - offsetSmallX, "y": y + offsetSmallY},
                {"id": 6, "x": x - offsetSmallX, "y": y - offsetSmallY},
            ];
        },
        drawScore() {
            let a = setInterval(() => {
                this.drawBackground()
                this.updateDrawer()
                // this.ctx.clearRect(0,0,this.width,this.height);
                this.i++
                if (this.i > 44) {
                    clearInterval(a)
                } else {

                }
            }, 40)
        },
        drawScore1() {
                this.drawBackground()
                this.updateDrawer()
                // this.ctx.clearRect(0,0,this.width,this.height);
        },
        /**
         * 绘制圆角六边形
         * 思路：通过绘制六条边，其中两条边之间留出空间，并在其中画出曲线以模拟圆角
         */
        drawArc() {
            let x = this.arcXPoint
            let y = this.arcYPoint
            let r = this.arcR
            let ctx = this.ctx
            //x,y偏移量
            this.offsetX = (Math.sqrt(3) * this.sideLength) / 2//x坐标的偏移量 cos 30° * 边长 / 2,
            this.offsetY = this.sideLength / 2//x坐标的偏移量 sin 30° * 边长
            let offsetX = this.offsetX
            let offsetY = this.offsetY
            let radius = 3 //两条边的间距
            let hd = 2; //曲线的高度
            //六条边
            let pointArray = [
                {
                    start: {x: x + radius, y: y - r + radius},
                    end: {x: x + offsetX - radius, y: y - offsetY - radius}
                },
                {
                    start: {x: x + offsetX, y: y - offsetY + radius},
                    end: {x: x + offsetX, y: y + offsetY - radius}
                },
                {
                    start: {x: x + offsetX - radius, y: y + offsetY + radius},
                    end: {x: x + radius, y: y + r - radius}
                },
                {
                    start: {x: x - radius, y: y + r - radius},
                    end: {x: x - offsetX + radius, y: y + offsetY + radius}
                },
                {
                    start: {x: x - offsetX, y: y + offsetY - radius},
                    end: {x: x - offsetX, y: y - offsetY + radius}
                },
                {
                    start: {x: x - offsetX + radius, y: y - offsetY - radius},
                    end: {x: x - radius, y: y - r + radius}
                }
            ]
            ctx.beginPath();
            for (let i = 0; i < 6; i++) {
                ctx.moveTo(pointArray[i].start.x, pointArray[i].start.y);
                ctx.lineTo(pointArray[i].end.x, pointArray[i].end.y);
                // ctx.stroke()
            }

            ctx.moveTo(pointArray[0].start.x, pointArray[0].start.y); // 起点
            ctx.quadraticCurveTo(x, y - r + hd, pointArray[5].end.x, pointArray[5].end.y);
            ctx.moveTo(pointArray[0].end.x, pointArray[0].end.y); // 起点
            ctx.quadraticCurveTo(x + offsetX, y - offsetY + hd, pointArray[1].start.x, pointArray[1].start.y);
            ctx.moveTo(pointArray[1].end.x, pointArray[1].end.y); // 起点
            ctx.quadraticCurveTo(x + offsetX, y + offsetY + hd, pointArray[2].start.x, pointArray[2].start.y);
            ctx.moveTo(pointArray[2].end.x, pointArray[2].end.y); // 起点
            ctx.quadraticCurveTo(x, y + r - hd, pointArray[3].start.x, pointArray[3].start.y);
            ctx.moveTo(pointArray[3].end.x, pointArray[3].end.y);
            ctx.quadraticCurveTo(x - offsetX, y + offsetY + hd, pointArray[4].start.x, pointArray[4].start.y);
            ctx.moveTo(pointArray[4].end.x, pointArray[4].end.y);
            ctx.quadraticCurveTo(x - offsetX, y - offsetY - hd, pointArray[5].start.x, pointArray[5].start.y);
            ctx.lineWidth = 2
            ctx.strokeStyle = "#0af3e8";
            ctx.globalAlpha = 0.2
            ctx.stroke()
        }
    },
    mounted() {
        this.init()
        if (!this.isFeatureHasScore){
            this.drawScore1()
        }else {
            this.drawScore()
        }
    }

}
</script>

<style scoped>

</style>